{include file="public/header"}
</head>

<body>
    <div class="cBody">
        <a href="javascript:;" class="layui-btn oneself-add">添加规格</a>
        <form action="" class="layui-form">
            <table class="layui-table">
                <thead>
                    <tr>
                        <th>规格名称</th>
                        <th>价格</th>
                        <th>库存</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody class="oneself-list">
                    {foreach $list as $k=>$v}
                    <tr id="{$k+1}">
                        <td>
                            <input class="layui-input" type="text" name="data[{$k+1}][name]" value="{$v.name}"
                                lay-verify="required|name">
                        </td>
                        <td>
                            <input class="layui-input" type="tel" name="data[{$k+1}][price]" value="{$v.price}"
                                onkeyup="this.value=this.value.replace(/[^\d.]/g,'')"
                                onpaste="this.value=this.value.replace(/[^\d.]/g,'')" lay-verify="required|prices">
                        </td>
                        <td>
                            <input class="layui-input" type="tel" name="data[{$k+1}][storage]" value="{$v.storage}"
                                onkeyup="this.value=this.value.replace(/[^\d]/g,'')"
                                onpaste="this.value=this.value.replace(/[^\d]/g,'')" lay-verify="required|storage">
                        </td>
                        <td>
                            <a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-danger oneself-del">
                                <i class="layui-icon layui-icon-delete"></i>
                            </a>
                        </td>
                    </tr>
                    {/foreach}
                </tbody>
            </table>
            <div style="text-align: center;padding-top: 20px;">
                <button class="layui-btn" lay-submit lay-filter="submitBut">保存</button>
            </div>
        </form>
    </div>
</body>
<script>
    layui.use(['form'], function () {
        var form = layui.form;
        //自定义验证规则
        form.verify({
            name: function (value) {
                if (value.length > 6) {
                    return '规格名称不可超6个字符';
                }
            },
            prices: [
                /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
                , '请输入正确的格式,如：0.01'
            ],
            storage: [
                /^[0-9]*$/
                , '输入格式必须为纯数字'
            ]
        });
        //监听提交
        form.on('submit(submitBut)', function (data) {
            ajax_submit(data.field, '', 'demo');
            return false;
        });
    });
    $('body').delegate('.oneself-add', 'click', function () {
        // console.log($('.oneself-list > tr').size());
        if ($('.oneself-list > tr').size() > 0) {
            var i = parseInt($('.oneself-list > tr:last-child').attr('id')) + 1;
        } else {
            var i = 1;
        }
        $('.oneself-list').append(
            '<tr id="' + i + '"><td><input class="layui-input" type="text" name="data[' + i + '][name]" lay-verify="required|name" value=""></td>' +
            '<td><input class="layui-input" type="tel" name="data[' + i + '][price]" lay-verify="required|prices" value=""></td>' +
            '<td><input class="layui-input" type="tel" name="data[' + i + '][storage]" lay-verify="required|storage" value=""></td>' +
            '<td><a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-danger oneself-del"><i class="layui-icon layui-icon-delete"></i></a></td></tr>'
        );
    });
    $('body').delegate('.oneself-del', 'click', function () {
        $(this).parent().parent().remove();
    });
</script>
{include file="public/footer"}